<template>
  <d2-container>
    <template slot="header">
      <el-form
        :gutter="24"
        ref="search-box"
        :model="mainQuery"
        label-width="auto"
        label-position="left"
        :inline="true"
      >
        <el-form-item  :label="$t('page.form.platformnumber')" size="mini">
          <el-input
            placeholder=""
            v-model="mainQuery.terNo"
            @keyup.enter.native="fetchMainData"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('page.form.accountType')" size="mini">
          <el-select
            v-model="mainQuery.accountType"
            :placeholder="$t('page.form.all')"
            clearable
            @change="fetchMainData"
          >
            <el-option
              v-for="item in accountTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('page.form.temporalInterval')" size="mini">
          <el-date-picker
            v-model="mainQuery.settleTimeRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
             :start-placeholder="$t('page.form.startDate')"
             :end-placeholder="$t('page.form.endTime')"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div class="search-btn-box">
        <div class="left">
          <el-button-group> </el-button-group>
        </div>
        <div class="right">
          <el-button
            class="filter-item"
            icon="el-icon-refresh"
            type="default"
            @click="resetMainData"
            :loading="mainTable.loading"
            size="mini"
             >{{ $t('page.search-box.reset') }}</el-button
          >
          <el-button
            class="filter-item"
            icon="el-icon-search"
            type="primary"
            @click="fetchMainData"
            :loading="mainTable.loading"
            size="mini"
           >{{ $t('page.search-box.search') }}</el-button
          >
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud
      ref="d2Crud"
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :rowHandle="mainTable.rowHandle"
      :selection-row="mainTable.allowSelect"
      :loading="mainTable.loading"
      @current-change="onMainCurrentChange"
      @custom-emit-handle-refund="checkDetail"
    ></d2-crud>

    <template slot="footer">
      <el-pagination
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
      >
      </el-pagination>
    </template>
      <dialog-table ref="dialog-table" @dialog-close="fetchMainData"></dialog-table>
  </d2-container>
</template>

<script>
import util from "@/libs/util";
import i18nTable from "@/mixins/i18n-table";
import ApiMain from "@/api/settle.accountAccess";
import DialogTable from './dialog-table';
export default {
  mixins: [i18nTable],
  components: {
    DialogTable
  },
  data() {
    return {
      accountTypeOptions: [],
      typeOptions: [],

      mainQueryRaw: null,
      mainQuery: {
        terNo: "",
        accountType: "",
        type: "",
      },

      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: this.$t('page-announcement.d2-crud.empty-data'),
          size: "mini",
        },
        indexRow: {
          title: "序号",
          width: "80",
          align: "center",
        },
        indexRow: null,
        allowSelect: false,
        columns: [
          {
            title: "订单号",
            key: "serialNo",
            align: "center",
            showOverflowTooltip: true,
            width: 120,
          },
          {
            title: "账户类型",
            key: "strAccountType",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            title: "金额",
            key: "amount",
            align: "center",
            showOverflowTooltip: true,
            formatter: (row, col, val, index) => {
              return (val / 100).toFixed(2);
            },
          },
          {
            title: "币种",
            key: "settleCurrency",
            align: "left",
            showOverflowTooltip: true,
            width: 80,
          },
          {
            title: "说明",
            key: "remark",
            align: "left",
            showOverflowTooltip: true,
            width: 400,
          },
          {
            title: "出入帐时间",
            key: "createTime",
            align: "center",
            showOverflowTooltip: true,
            width: 180,
          },
        ],
        rowHandle: {
          width: "130",
          align: "center",
          fixed: "right",
           t: "page.form.operation",
          columnHeader: this.$t('page.form.operation'),
          custom: [
            {
              text: "退款",
              t: "page-trade-complaint.d2-crud.column-checkdetail",
              type: "primary",
              size: "mini",
              emit: "custom-emit-handle-refund",
            },
          ],
        },
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200],
        },
        current: null,
      },
    };
  },
  mounted() {
    this.mainQueryRaw = Object.copy(this.mainQuery);

    var re = this.fetchOptions().finally(() => {
      this.resetMainData();
    });
  },

  methods: {
    checkDetail(row) {
      console.log("?")
      this.$refs['dialog-table'].show(row.id);
    },
    renderMainData(re) {
      re.list.forEach((item) => {
        item.floatAmount = item.amount / 100;
        item.floatBeforeTotalAmount = item.beforeTotalAmount / 100;
        item.floatAfterTotalAmount = item.afterTotalAmount / 100;

        item.strAccountType = util.tool.strFromOptions(
          item.accountType,
          this.accountTypeOptions,
          "-"
        );
        item.strType = util.tool.strFromOptions(
          item.type,
          this.typeOptions,
          "-"
        );
      });

      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData();
    },

    buildMainQuery() {
      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {
      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.fetchMainData();
    },

    async fetchOptions() {
      var re = await ApiMain.getAccountTypeOptions();
      this.accountTypeOptions = re;

      var re = await ApiMain.getTypeOptions();
      this.typeOptions = re;
    },

    async fetchMainData() {
      this.mainTable.loading = true;

      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) {}

      this.mainTable.loading = false;
    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },
  },
};
</script>

<style>
</style>
